<template>
  <div class="line-notes-pane">
    <div class="note-section">
      <div class="note-section-title grey">
        已选内容
        <span class="star">
          <star :star="star" @update-context="$emit('update-context', $event)" @save-note="saveNote"></star>
        </span>
      </div>
      <div class="note-ref" v-show="this.context.mat.format != MatFormat.File">
        {{context.content}}
      </div>
      <div class="code-line" :class="codeLang">
      </div>
    </div>
    <note-section :notes="notes" :kind="NoteKind.Note" @add-note="addNote"></note-section>
    <note-section :notes="notes" :kind="NoteKind.Lecture" @add-note="addNote"></note-section>
    <note-section :notes="notes" :kind="NoteKind.Translation" @add-note="addNote"></note-section>
    <note-section :notes="notes" :kind="NoteKind.Reference" @add-note="addNote"></note-section>
    <div id="line-note-editor" class="note-editor-pane" v-show="isShowEditor">
      <note-editor ref="noteEditor" :context="context" :value="note" @close="isShowEditor=false"></note-editor>
    </div>
  </div>
</template>

<script>
import NoteEditor from "./editors/NoteEditor.vue";
import NoteSection from "./NoteSection.vue";
import Star from "../tools/Star.vue";
import { NoteKind, NoteScope, MatFormat } from "@js/constants.js";

import hljs from "highlight.js";

export default {
  components: {
    NoteEditor,
    Star,
    NoteSection
  },
  props: ["context"],
  data() {
    return {
      NoteKind: NoteKind,
      NoteScope: NoteScope,
      MatFormat: MatFormat,
      isShowEditor: true,
      isFav: false,
      editorText: "",
      note: {
        content: "",
      },
      star: {
        value: 0,
        kind: NoteKind.Star,
        scope: NoteScope.Line
      },
      notes:[] 
    };
  },
  computed: {
    isSelection() {
      return "type" in this.context;
    },
    codeLang() {
      let paths = this.$route.path.split(".");
      if (paths.length > 0) {
        return paths[1];
      } else {
        return "txt";
      }
    }
  },
  watch: {
    'context.content': {
      handler() {
        if (this.context.content && this.context.mat.format == MatFormat.File) {
          let codespan = this.$el.getElementsByClassName("code-line")[0];
          codespan.textContent = this.context.content;
          hljs.highlightBlock(codespan);
        }
        
        // 先加载
        this.loadLineNotes();
        this.star.mid = this.context.mat.id;
        this.star.line = this.context.line;
        this.star.spos = this.context.spos;
        this.star.epos = this.context.epos;
      },
    }
  },
  methods: {
    loadLineNotes() {
      this.hideEditor();
      if (this.context.mat && this.context.mat.id) {
        this.authGet( "/api/v1/note/list/cards?mid=" + this.context.mat.id + "&scope=" + NoteScope.Line + "&line=" + Number(this.context.line))
          .then((res) => {
            this.notes = res.data;
            this.updateStar();
          })
          .catch((e) => console.log(e));
      }
    },
    updateStar() {
      this.star.value = 0;
      for (let n of this.filteredNotes(NoteKind.Star)) {
        this.star = n;
      }
    },
    addNote(kind) {
      this.$emit("update-context", { kind: kind });
      this.showEditor(kind);
    },
    showEditor(kind) {
      // TODO: 需要根据情况清空编辑器的内容
      let editor = document.getElementById("line-note-editor");
      let classname = "note-kind-" + kind;
      for (let notelist of this.$el.getElementsByClassName(classname)) {
        notelist.appendChild(editor);
      }
      this.isShowEditor = true;
    },
    hideEditor() {
      this.isShowEditor = false;
    },
    filteredNotes(kind) {
      return this.notes.filter(n => n.kind == kind);
    },
    saveNote() {
      console.log('saving note');
      this.$refs.noteEditor.saveNote();
    }
  },
};
</script>

<style lang="stylus">

.line-notes-pane
  padding 0

  .star
    float right

</style>